<template>
	<view class="nav-tab-bar">
		<scroll-view scroll-x scroll-with-animation class="tab-view" :scroll-left="scrollLeft">
			<view v-for="(item, index) in tabLists" :key="index" class="tab-bar-item" :data-current="index" @tap.stop="swichNav">
				<text class="tab-bar-title" :class="[currentTab == index ? 'active' : '']">{{ item.name }}</text>
				<view v-if="currentTab == index" class="tab-bar-item-line"></view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
export default {
	name: 'navTabBar',
	props: {
		tabLists: {
			default: []
		}
	},
	data() {
		return {
			scrollLeft: 0,
			currentTab: 0 //预设当前项的值
		};
	},
	methods: {
		// 点击标题切换当前页时改变样式
		swichNav(e) {
			let cur;
			if (e.currentTarget) {
				cur = e.currentTarget.dataset.current;
			} else {
				cur = e;
			}
			if (this.currentTab == cur) {
				return false;
			} else {
				this.currentTab = cur;
				console.log(cur, 'navbar切换');
				this.$emit('handleChange', cur);
			}
			this.checkCor();
		},
		//判断当前滚动超过一屏时，设置tab标题滚动条。
		checkCor() {
			if (this.currentTab > 4) {
				//这里距离按实际计算
				this.scrollLeft = 300;
			} else {
				this.scrollLeft = 0;
			}
		}
	}
};
</script>

<style scoped lang="scss">
::-webkit-scrollbar {
	width: 0;
	height: 0;
	color: transparent;
}
.nav-tab-bar {
	width: 100%;
	padding-bottom: 10rpx;
	.tab-view {
		position: relative;
		width: 100%;
		height: 80upx;
		overflow: hidden;
		box-sizing: border-box;
		white-space: nowrap;
	}
	.tab-view-fixed {
		position: fixed;
		top: 0;
		/* #ifdef H5 */
		top: 44px;
		/* #endif */
		left: 0;
		z-index: 99;
	}

	.tab-bar-item {
		height: 100%;
		position: relative;
		line-height: 80upx;
		width: fit-content;
		margin-right: 38rpx;
		display: inline-block;
		text-align: center;
		box-sizing: border-box;
	}
	.tab-bar-item-line {
		width: 90%;
		height: 6upx;
		background-color: #fed100;
		position: absolute;
		bottom: 8rpx;
		left: 0;
		right: 0;
		margin: 0 auto;
		border-radius: 2upx;
	}
	.tab-bar-title {
		display: inline-block;
		height: 86upx;
		line-height: 71upx;
		font-size: 30upx;
		color: #333333;
		box-sizing: border-box;
		font-weight: 500;
	}
	.active {
		// border-bottom: 4upx solid #E47517;
		font-size: 30rpx;
		font-weight: bold;
		color: #333333;
	}
}
</style>
